<template>
    <div class="app-container">
      <!-- 查询表单 -->
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
        <el-form-item label="事件标题" prop="title">
          <el-input v-model="queryParams.title" placeholder="请输入事件标题" clearable style="width: 200px" @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="事件状态" clearable style="width: 200px">
            <el-option label="待处理" :value="0" />
            <el-option label="进行中" :value="1" />
            <el-option label="已完成" :value="2" />
            <el-option label="已取消" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <!-- 按钮区域 -->
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
        </el-col>
      </el-row>
  
      <!-- 事件列表 -->
      <el-table v-if="refreshTable" v-loading="loading" :data="eventList" row-key="id">
        <el-table-column prop="title" label="事件标题" width="200"></el-table-column>
        <el-table-column prop="description" label="事件内容" width="300"></el-table-column>
        <el-table-column prop="eventDate" label="事件日期" width="200">
          <template #default="scope">
            <span>{{ formatDate(scope.row.eventDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="location" label="地点" width="150"></el-table-column>
        <el-table-column prop="createdBy" label="创建者ID" width="150"></el-table-column>
        <el-table-column prop="eventType" label="事件类型" width="150">
          <template #default="scope">
          {{ getEventTypeLabel(scope.row.eventType) }}</template>
        </el-table-column>
        <el-table-column prop="receiverId" label="接收者ID" width="150"></el-table-column>
        <el-table-column prop="reward" label="奖赏金额" width="150"></el-table-column>
        <el-table-column prop="status" label="事件状态" width="150">
          <template #default="scope">
            <span v-if="scope.row.status === 0">待处理</span>
            <span v-if="scope.row.status === 1">进行中</span>
            <span v-if="scope.row.status === 2">已完成</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right"   label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 添加或修改事件对话框 -->
      <el-dialog :title="title" v-model="open" width="600px" append-to-body>
        <el-form ref="eventRef" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="事件标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入事件标题" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="事件内容" prop="description">
                <el-input v-model="form.description" placeholder="请输入事件内容" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="事件日期" prop="eventDate">
                <el-date-picker v-model="form.eventDate" type="datetime" placeholder="选择事件日期" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地点" prop="location">
                <el-input v-model="form.location" placeholder="请输入事件地点" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建者ID" prop="createdBy">
                <el-input v-model="form.createdBy" placeholder="请输入创建者ID" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="事件类型" prop="eventType">
                <el-select v-model="form.eventType" placeholder="选择事件类型">
                  <el-option label="代取快递" :value="1" />
                  <el-option label="待打印" :value="2" />
                  <el-option label="求取二手物品" :value="3" />
                  <el-option label="校园即送" :value="4" />
                  <el-option label="代购服务" :value="5" />
                  <el-option label="陪伴服务" :value="6" />
                  <el-option label="学习辅导" :value="7" />
                  <el-option label="拼车服务" :value="8" />
                  <el-option label="房屋租赁" :value="9" />
                  <el-option label="活动组织" :value="10" />
                  <el-option label="二手交易" :value="11" />
                  <el-option label="技能交换" :value="12" />
                  <el-option label="健康咨询" :value="13" />
                  <el-option label="志愿服务" :value="14" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="接收者ID" prop="receiverId">
                <el-input v-model="form.receiverId" placeholder="请输入接收者ID" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="奖赏金额" prop="reward">
                <el-input v-model="form.reward" placeholder="请输入奖赏金额" type="number" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态">
                <el-radio-group v-model="form.status">
                  <el-radio :label="0">待处理</el-radio>
                  <el-radio :label="1">进行中</el-radio>
                  <el-radio :label="2">已完成</el-radio>
                  <el-radio :label="3">已取消</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup name="EventList">
  import { ref, reactive } from 'vue';
  import { listEvents, addEvent, updateEvent, deleteEvent } from "@/api/pages/event";
  
  const loading = ref(true);
  const open = ref(false);
  const title = ref("");
  const refreshTable = ref(true);
  const eventList = ref([]);
  const form = reactive({
    id: undefined,
    title: "",
    description: "",
    eventDate: "",
    location: "",
    createdBy: "",
    eventType: 1,
    receiverId: "",
    reward: 0,
    status: 0
  });
  const queryParams = reactive({
    title: "",
    status: undefined
  });
  const rules = {
    title: [{ required: true, message: "事件标题不能为空", trigger: "blur" }],
    description: [{ required: true, message: "事件内容不能为空", trigger: "blur" }],
    eventDate: [{ required: true, message: "事件日期不能为空", trigger: "change" }]
  };
  
  // 查询事件列表
  const getList = () => {
    loading.value = true;
    listEvents(queryParams).then(response => {
      eventList.value = response.data;
      loading.value = false;
    });
  };
  
  // 取消按钮
  const cancel = () => {
    open.value = false;
    reset();
  };
  
  // 重置表单
  const reset = () => {
    Object.assign(form, {
      id: undefined,
      title: "",
      description: "",
      eventDate: "",
      location: "",
      createdBy: "",
      eventType: 1,
      receiverId: "",
      reward: 0,
      status: 0
    });
  };

//获取事件状态标签
const getEventTypeLabel = (eventType) => {
  switch (eventType) {
    case '1': return '代取快递';
    case '2': return '待打印';
    case '3': return '求取二手物品';
    case '4': return '校园即送';
    case '5': return '代购服务';
    case '6': return '陪伴服务';
    case '7': return '学习辅导';
    case '8': return '拼车服务';
    case '9': return '房屋租赁';
    case '10': return '活动组织';
    case '11': return '二手交易';
    case '12': return '技能交换';
    case '13': return '健康咨询';
    case '14': return '志愿服务';
    default: return '未知类型';
  }
};


  
  // 搜索按钮操作
  const handleQuery = () => {
    getList();
  };
  
  // 重置按钮操作
  const resetQuery = () => {
    Object.assign(queryParams, {
      title: "",
      status: undefined
    });
    getList();
  };
  
  // 新增按钮操作
  const handleAdd = () => {
    reset();
    open.value = true;
    title.value = "新增事件";
  };
  
  // 修改按钮操作
  const handleUpdate = (row) => {
    Object.assign(form, row);
    open.value = true;
    title.value = "修改事件";
  };
  
  // 提交按钮
  const submitForm = () => {
    const apiCall = form.id ? updateEvent : addEvent;
    apiCall(form).then(() => {
      getList();
      open.value = false;
    });
  };
  
  // 删除按钮操作
  const handleDelete = (row) => {
    deleteEvent(row.id).then(() => {
      getList();
    });
  };
  
  // 格式化日期
  const formatDate = (date) => {
    return new Date(date).toLocaleString();
  };
  
  // 初始化事件列表
  getList();
  </script>
  
  <style scoped>
  .app-container {
    padding: 20px;
  }
  .mb8 {
    margin-bottom: 8px;
  }
  .dialog-footer {
    text-align: right;
  }
  </style>